<template>
  <view>
    <!-- 数据列表 -->
    <view class="data-box">
      <!-- 列表 -->
      <z-paging
        ref="paging"
        v-model="praiseList"
        :default-page-size="limit"
        :use-page-scroll="true"
        :to-bottom-loading-more-enabled="true"
        :auto="false"
        :fixed="false"
        :min-delay="800"
        :show-loading-more-no-more-view="false"
        :refresher-enabled="false"
        @query="getData"
      >
        <view class="flex flex-wrap justify-between">
          <view
            class="praise-box"
            v-for="(item, idx) in praiseList"
            :key="idx"
            @click="goto(item.id, idx)"
          >
            <view class="img-zone">
              <image
                class="poster"
                mode="aspectFill"
                lazy-load
                :lazy-load-margin="0"
                :src="`${item.poster}?imageMogr2/thumbnail/800x`"
              ></image>
            </view>

            <view class="text-zone">
              <view class="praise-desc">{{ item.title }}</view>
              <view class="flex items-center justify-end pt-10rpx">
                <view class="flex items-center" @click.stop="setLike(idx)">
                  <image
                    class="like-icon"
                    v-show="item.is_like == 0"
                    src="@/static/icon/svg/video/love_line.svg"
                  ></image>
                  <image
                    class="like-icon"
                    v-show="item.is_like == 1"
                    src="@/static/icon/svg/video/love_active.svg"
                  ></image>
                  <text class="like-num">{{ item.like_num }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <template #loading>
          <view class="loading">
            <mt-logo-loading :size="88"></mt-logo-loading>
          </view>
        </template>
      </z-paging>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import MtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref, nextTick } from 'vue';
  import { getPraises as getDataApi, setPraiseLike } from '@/api/praise';
  import { report } from '@/utils/exception';
  import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
  import type { PraiseItem } from '@/types/praise';

  const praiseList = ref<PraiseItem[]>([]);
  const paging = ref();
  const limit = 8;
  const categoryId = ref<number>(0);

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, categoryId.value)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
      });
  };

  onReachBottom(() => {
    paging.value.doLoadMore();
  });

  // 点赞
  let timer: any;
  const setLike = (index: number) => {
    praiseList.value[index].is_like = praiseList.value[index].is_like == 0 ? 1 : 0;
    praiseList.value[index].is_like == 1
      ? praiseList.value[index].like_num++
      : praiseList.value[index].like_num > 0
      ? praiseList.value[index].like_num--
      : 0;
    clearTimeout(timer);
    timer = setTimeout(() => {
      setPraiseLike(praiseList.value[index].id, praiseList.value[index].is_like)
        .then((res) => {})
        .catch((err) => {
          report(err);
          praiseList.value[index].is_like = praiseList.value[index].is_like == 0 ? 1 : 0;
          praiseList.value[index].is_like == 1
            ? praiseList.value[index].like_num++
            : praiseList.value[index].like_num > 0
            ? praiseList.value[index].like_num--
            : 0;
        });
    }, 500);
  };

  const syncLike = (index: number, is_like: number, like_num: number) => {
    praiseList.value[index].is_like = is_like;
    praiseList.value[index].like_num = like_num;
  };

  const goto = (id: number, idx: number) => {
    uni.navigateTo({ url: `/pages/praise/detail?id=${id}&idx=${idx}` });
  };

  onLoad(() => {
    nextTick(() => {
      paging.value.reload();
    });
  });

  onShow(() => {
    uni.$once('syncPraiseLike', (e) => {
      syncLike(e.index, e.is_like, e.like_num);
    });
  });
</script>

<style>
  page {
    background: #f5f5f5;
  }
</style>

<style lang="scss" scoped>
  .data-box {
    margin: 25rpx 20rpx 20rpx 20rpx;

    .praise-box {
      background: white;
      width: 346rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      border-radius: 15rpx;

      .img-zone {
        .poster {
          height: 346rpx;
          width: 100%;
        }
      }

      .text-zone {
        padding: 16rpx 15rpx;

        .praise-desc {
          font-size: 26rpx;
          margin-bottom: 8rpx;
          font-weight: 600;
          height: 62rpx;
          letter-spacing: 1rpx;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          text-overflow: -o-ellipsis-lastline;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .like-icon {
          width: 32rpx;
          height: 32rpx;
        }
        .like-num {
          margin-left: 10rpx;
          font-size: 26rpx;
        }
      }
    }

    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1000rpx;
    }
  }
</style>
